<script lang="ts" setup>
import { ref, computed } from "vue";
// 导入图标工具
import { Search, Refresh } from "@/utils/icons.js";
// 导入消息工具
import message from "@/utils/message.js";

// 日志分类
const logTypes = ref([
    { id: 1, name: "全部" },
    { id: 2, name: "登录" },
    { id: 3, name: "操作" },
    { id: 4, name: "系统" },
]);

// 当前选中的分类
const activeType = ref(1);

// 日志列表
const logs = ref([
    {
        id: 1,
        type: 2,
        action: "用户登录",
        operator: "admin",
        ip: "192.168.1.100",
        time: "2025-05-10 09:30:25",
        detail: "用户通过企业账号登录系统",
    },
    {
        id: 2,
        type: 3,
        action: "发布职位",
        operator: "hr1",
        ip: "192.168.1.101",
        time: "2025-05-10 10:15:42",
        detail: "发布了前端开发工程师职位",
    },
    {
        id: 3,
        type: 3,
        action: "修改配置",
        operator: "admin",
        ip: "192.168.1.100",
        time: "2025-05-10 14:20:18",
        detail: "更新了企业基本信息",
    },
]);

// 搜索关键词
const searchQuery = ref("");

// 日期范围
const dateRange = ref([]);

// 刷新日志
const refreshLogs = () => {
    console.log("刷新日志数据");
    // 这里添加实际刷新逻辑
};

// 过滤日志列表
const filteredLogs = computed(() => {
    return logs.value.filter((log) => {
        const typeMatch = activeType.value === 1 || log.type === activeType.value;
        const searchMatch =
            log.action.includes(searchQuery.value) ||
            log.operator.includes(searchQuery.value) ||
            log.detail.includes(searchQuery.value);

        // 修复日期比较的类型错误
        let dateMatch = true;
        if (dateRange.value && dateRange.value.length === 2) {
            const startDate = dateRange.value[0] ? new Date(dateRange.value[0]).getTime() : 0;
            const endDate = dateRange.value[1] ? new Date(dateRange.value[1]).getTime() : Infinity;
            const logDate = new Date(log.time).getTime();
            dateMatch = logDate >= startDate && logDate <= endDate;
        }

        return typeMatch && searchMatch && dateMatch;
    });
});
</script>

<template>
    <div class="log-container">
        <div class="header">
            <h2>企业日志</h2>
            <div class="actions">
                <el-button :icon="Refresh" @click="refreshLogs">刷新</el-button>
            </div>
        </div>

        <div class="filter-bar">
            <div class="filter-item">
                <el-select v-model="activeType" placeholder="日志类型">
                    <el-option v-for="type in logTypes" :key="type.id" :label="type.name" :value="type.id" />
                </el-select>
            </div>

            <div class="filter-item">
                <el-date-picker
                    v-model="dateRange"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                />
            </div>

            <div class="filter-item search-item">
                <el-input v-model="searchQuery" placeholder="搜索操作/操作人/详情" :prefix-icon="Search" />
            </div>
        </div>

        <el-table :data="filteredLogs" style="width: 100%">
            <el-table-column prop="time" label="时间" width="180" />
            <el-table-column prop="action" label="操作" width="150" />
            <el-table-column prop="operator" label="操作人" width="120" />
            <el-table-column prop="ip" label="IP地址" width="150" />
            <el-table-column prop="detail" label="详情" />
        </el-table>
    </div>
</template>

<style scoped>
.log-container {
    padding: 20px;
    background-color: #f8fafc;
    min-height: 100vh;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
}

.filter-bar {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.filter-item {
    flex: 0 0 auto;
}

.search-item {
    flex: 1;
    min-width: 300px;
}

.el-table {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
</style>
